<template>
  <div class="like_comment">
    <div class="border-wrap wrap">
      <span class="title">留言板</span>
      <div class="comment-list">
        <view v-for="(item, index) in commentList" :key="index">
          <text class="comment-header">{{ item.observer }}评论于{{ item.createTime }}</text>
          <view>{{ item.comment }}</view>
        </view>
      </div>
      <form @submit="handleSubmit">
        <textarea
          placeholder="请说出你想说的话..."
          class="input-textarea"
          :value="commentVal"
          maxlength="200"
          @blur="handleBlur"
        />
        <view class="submit-btn">
          <button form-type="submit" size="mini" type="primary">提交</button>
        </view>
      </form>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import { wxRequest, requestUrl } from '../requestApi/request'
  export default {
    data () {
      return {
        articleId: '',
        commentVal: '',
        commentList: []
      }
    },
    onLoad () {
      const { articleId } = this.$root.$mp.query
      this.articleId = articleId
      this.getComment(articleId)
    },
    methods: {
      handleBlur (e) {
        this.commentVal = e.target.value
      },
      getComment (articleId) {
        wxRequest({
          url: requestUrl.getComment,
          data: {
            articleId
          }
        }).then((result) => {
          const { data } = result
          if (data.code === 200 && data.message) {
            data.message.forEach(element => {
              element.createTime = moment(element.createTime).format('YYYY-MM-DD HH:mm:ss')
            })
            this.commentList = data.message
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      handleSubmit (e) {
        const userInfo = wx.getStorageSync('userInfo')
        const parmas = {
          observer: userInfo.nickName,
          comment: this.commentVal,
          articleId: this.articleId
        }
        wxRequest({
          url: requestUrl.sendComment,
          data: parmas,
          method: 'POST'
        }).then((result) => {
          const { data } = result
          if (data.code === 200) {
            wx.showToast({
              title: data.message,
              icon: 'none',
              duration: 1000,
              mask: false,
              success: (result) => {
                this.commentVal = ''
                this.getComment(this.articleId)
              }
            })
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
.wrap{
  margin: 100rpx auto;
  width: 100%;
  font-size: 16px;
  min-height: 500rpx;
  padding: 20rpx;
}
.border-wrap{
  position: relative;
  border: 1px solid rgb(228, 222, 222);
  box-sizing: border-box;
}
.border-wrap .title{
  position: absolute;
  top: -1.2em;
  left: 10%;
  line-height: 2em;
  padding: 0 1em;
  background-color: #fff;
}
.input-textarea {
  border: 1px solid rgb(228, 222, 222);
  border-radius: 10rpx;
  width: 100%;
  padding: 10rpx;
  margin-bottom: 10rpx;
  min-height: 300rpx;
  box-sizing: border-box;
}
.submit-btn {
  text-align: center;
}
.comment-list {
  font-size: 14px;
  margin-bottom: 20rpx;
}
.comment-header {
  color: skyblue;
}
</style>